import React, { useEffect ,useState,memo,useCallback} from "react";
import { Button, ButtonProps } from "antd";

const Child = memo(({ onClick }: ButtonProps) => {
  console.log("render child");
  useEffect(()=>{
    console.log(2)
    return()=>{
      console.log(2)
    }
  },[])
  return (
    <Button onClick={onClick} type="primary">
      Button
    </Button>
  );
});

const Demo = () => {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    console.log(1)
    // const time = setInterval(() => {
    //   setCount((count) => count + 1);

    // }, 1000);
    // return () => {
    //   clearInterval(time);
    // };
    return()=>{
      console.log(1)
    }
  }, []);

  const handleClick = useCallback(() => {
     console.log("count:", count);
    //setCount(count+10)  使用它也需要传入依赖项，不然一直都是0+10

  },[count]); // 保持函数引用类型不变 ，一定要传入依赖，不然值不会变


  return (
    <>
      <h2>{count}</h2>
      <Child onClick={handleClick} />
      <Counter/>
    </>
  );
};


function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  function handleAlert() {
    setTimeout(() => {
      alert('Current count: ' + count);
    }, 3000);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleAlert}>Show alert after 3 seconds</button>
    </div>
  );
}


/**
 * MENU_* 开头信息在 package.json(在webpack分支中) 文件中找到
 * 给 pages 组件追加路由信息
 * export default 组件的原型上添加route信息,或者向外暴露一个 route
 * 会被vite的vite-plugin-react-router-generator插件捕获信息
 */

// 1.被捕获 export default 原型上的route
Demo.route={
  [MENU_TITLE] : "demo",
  [MENU_KEY] : "demo",
  [MENU_PATH]: "/demo",
  [MENU_LAYOUT]:"layout" // 该页面全屏显示 默认可以不填
}


export default Demo

